<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
      img{
        width: 210px;
        height: 129px;
      }
      .logo{
        text-align: center;
      }
      .top{
        width: 340px;
        height: 18px;
        margin:48px auto 0;
      }
      ul li{
        width: 38px;
        margin:0 auto;
        display:inline-block;
        
      }
      a{
        text-decoration: none;
        color: blueviolet;
      }
     .search{
        width:570px;
        height:32px;
        margin:27px auto 80px;
        
     }
     #baidu{
        float: left;
        margin-top:26px;
        width: 460px;
        height: 32px;
     }
     #bth{
        margin-top: 27px;
        float: left;
        width: 100px;
        height: 32px;
     }
     .main{
        clear: both;
     }
     p{
        text-align: center;
        color: blueviolet;
     }
     #maplogo{
      display: inline-block;
      width: 20px;
      height: 20px;
     }
     .map{
      width:350px;
      height:70px;
      margin: 50px auto 0;
     }
     .foot{
      width: 400px;
      height: 80px;
      margin:100px auto;
     }
     #p1{
      margin-bottom:21px;
     }
    #p3{
      margin-top: 19px;
      color: black;
    }
    </style>
</head>
<body>
    <div class="logo"><img src="image/logo.png" alt=""></div>
    <div class="top">
    <ul>
        <li> <a href="#">新闻</a> </li>
        <li> <a href="#">网页</a></li>
        <li><a href="#">贴吧</a></li>
        <li><a href="#">知道</a></li>
        <li><a href="#">音乐</a></li>
        <li><a href="#">图片</a></li>
        <li><a href="#">视频</a></li>
        <li><a href="#">地图</a></li>
    </ul>
</div>
<div class="search">
    <input type="search" name="sousuo" id="baidu">
    <input type="button" value="百度一下" id="bth">
</div>
<div class="main">
    <p>
        百度&nbsp;文库&nbsp;hao123|更多>>
    </p>
</div>
<div class="map">
  <p>
  <img src="image/map.png" id="maplogo">  
  百度地图带你吃喝玩乐，全心全意为人民服务
  </p>
</div>
<div class="foot">
 <p id="p1"> 把百度设置为主页&nbsp;安装百度卫士</p>
 <p id="p2">加入百度推广|搜索风云榜|关于百度|About Baidu</p>
 <p id="p3">©2013&nbsp;Baidu&nbsp;使用百度前必读&nbsp;京ICP证030173号</p>
</div>
</body>
</html>
